<template>
  <div class="gauge-chart-02 chart" ref="gaugeChart02Ref"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const gaugeChart02Ref = ref(null);
const echarts = inject('$echarts');

const seriesData = 0.9537;

const option = {
  backgroundColor: '#03171E',
  compCode: 'C202310034',
  series: [
    {
      name: '刻度',
      type: 'gauge',
      radius: '90%',
      min: 0,
      max: 100,
      splitNumber: 4, // 刻度数量
      startAngle: 180,
      endAngle: 0,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: [[1, 'rgba(0,0,0,0)']],
        },
      }, // 仪表盘轴线
      axisLabel: {
        show: true,
        color: '#2073B3',
        distance: 30,
        fontSize: '30',
        formatter: function (v) {
          switch (v + '') {
            case '0':
              return '0';
            case '25':
              return '25';
            case '50':
              return '50';
            case '75':
              return '75';
            case '100':
              return '100';
          }
        }
      }, // 刻度标签。
      axisTick: {
        show: false,
        splitNumber: 7,
        lineStyle: {
          color: '#fff',
          width: 1,
        },
        length: -5,
      }, // 刻度样式
      splitLine: {
        show: true,
        length: -5,
        lineStyle: {
          color: '#2073B3',
        },
      }, // 分隔线样式
      detail: {
        show: false,
      },
      pointer: {
        show: false,
      },
    },
    {
      type: 'gauge',
      radius: '100%',
      center: ['50%', '50%'],

      splitNumber: 0, // 刻度数量
      startAngle: 180,
      endAngle: 0,
      axisLine: {
        show: true,
        lineStyle: {
          width: 20,
          color: [
            [
              seriesData,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#2CBFFF',
                },
                {
                  offset: 1,
                  color: '#00FFBA',
                },
              ]),
            ],
            [1, '#082D4F'],
          ],
        },
      },
      // 分隔线样式。
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      pointer: {
        show: false,
      },
      detail: {
        show: true,
        offsetCenter: [0, '-25%'],
        color: '#FFE380',
        formatter: function (params) {
          return params + '%';
        },
        fontSize: 40,
        fontFamily: 'DIN'
      },
      title: {
        show: true,
        offsetCenter: [0, '0%'],
        color: '#fff',
        fontSize: 24,
      },
      // 仪表盘详情，用于显示数据。

      data: [
        {
          name: '进行中',
          value: seriesData * 100
        },
      ],

    },
  ]
}

onMounted(() => {
  const chart = echarts.init(gaugeChart02Ref.value);
  chart.setOption(option);
});
</script>